<template>
  <e-charts class="echarts-line-box" :options="options" />
</template>

<script>
import ECharts from "@/component/ECharts";

export default {
  name: "RainLine",

  components: {
    ECharts,
  },

  props: {
    data: {
      type: Array,
      default() {
        return [];
      },
    },
    title: {
      type: String,
      default() {
        return [];
      },
    },
  },

  data() {
    return {
      // data: [
      //     { name: "02-24", value: 35 },
      //     { name: "02-25", value: 30 },
      //     { name: "02-26", value: 32 },
      //     { name: "02-27", value: 40 },
      //     { name: "02-28", value: 19 },
      //     { name: "03-01", value: 25 },
      //     { name: "03-02", value: 42 },
      // ],
    };
  },

  computed: {
    options() {
      //当前视口宽度
      let nowClientWidth = document.documentElement.clientWidth;
      // 换算方法
      let nowSize = function (val, initWidth = 1920) {
        return val * (nowClientWidth / initWidth);
      };
      return {
        title: [
          {
            text: this.title || "",
            top: "2%",
            left: "center",
            textStyle: {
              color: "#fff",
              fontSize: nowSize(16),
            },
          },
        ],
        grid: {
          top: "20%",
          left: "10%",
          right: "5%",
          bottom: "10%",
          containLabel: true,
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "line", // 默认为直线，可选为：'line' | 'shadow'
          },
        },
        legend: {
          show: false,
          // itemHeight: 5,
          // textStyle: {
          //     color: "rgba(255, 255, 255, 0.7)",
          // },
        },
        xAxis: {
          type: "category",
          data: this.data.map((item) => item.name),
          axisLine: {
            lineStyle: {
              color: "rgba(154,233,255, 0.3)",
            },
          },
          axisTick: {
            lineStyle: {
              color: "rgba(154,233,255, 0.3)",
            },
          },
          axisLabel: {
            color: "#EBEBEB",
          },
        },
        yAxis: {
          name: "单位(mm)",
          nameTextStyle: {
            color: "#EBEBEB",
            fontSize: nowSize(12),
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: "rgba(154,233,255, 0.3)",
            },
          },
          axisTick: {
            show: true,
            lineStyle: {
              color: "rgba(154,233,255, 0.3)",
            },
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: ["rgba(154,233,255, 0.1)"],
              width: 1,
              type: "solid",
            },
          },
          axisLabel: {
            color: "#EBEBEB",
          },
        },
        series: [
          {
            type: "bar",
            barWidth: 12,
            // showBackground: true,
            // backgroundStyle: {
            //     color: 'rgba(180, 180, 180, 0.2)'
            // },
            itemStyle: {
              borderRadius: 20,
              color: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 1,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: "#1AD6FD",
                  },
                  {
                    offset: 1,
                    color: "#1D62F0",
                  },
                ],
              },
            },
            data: this.data.map((item) => item.value.toFixed(2)),
          },
        ],
      };
    },
  },
};
</script>

<style lang="scss" scoped>
.echarts-line-box {
  width: 100%;
  height: 100%;
}
</style>
